<template>
  <div  class="weather  row ">
     <div class="col-lg-3 col-md-6 col-sm-12">
     <div class="card">
					<div class="card-body" style="min-height:310px">
						<h4 class="card-title">天气 预报</h4>
						<hr>
						<div class="d-flex align-items-center flex-row m-t-30">
							<div class="p-2 display-5 text-info"><i class="wi wi-rain-mix"></i><span id="clnid" style="font-size:25px">{{low}}</span> ~ <span id="hotid" style="font-size:25px">{{high}}</span></div>
							<div class="p-2" style="margin-left:50px">
								<h3 class="m-b-0"><span id="dataid">{{day}}</span></h3>
								<small style="margin-left:10px">
                  <select  id="skycityid" class="select pull-right weatherSelect" style="width:100px;border:1px solid #fff" v-model="cityID" @change="getSelected">  
								    <option v-for="(item,i) in  selectCitys" :key="i"  :value="item.id">{{item.city}}</option>
									</select>
								</small>
							</div>
						</div>

            
          
						<table class="tabletest">
							<tbody>
								<tr>
									<td>风速</td>
									<td id="windid" class="font-medium">{{speed}}</td>
								</tr>
								<tr>
									<td>湿度</td>
									<td id="waterid" class="font-medium">98%</td>
								</tr> 
								<tr>
									<td>风向</td>
									<td id="windleid" class="font-medium">{{fengxiang}}</td>
								</tr>
								<tr>
									<td>天气</td>
									<td id="timeid" class="font-medium">{{type}}</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
    </div>
  </div>
</template>

<script>
// 天气接口
// http://www.weather.com.cn/data/sk/101010100.html  (这个接口有点故障)
// http://www.weather.com.cn/data/cityinfo/101010100.html (http请求不到)
// http://wthrcdn.etouch.cn/weather_mini?citykey=101220101 (可以请求,中华万年历)

 


export default {
  
  data () {
    return {
           selectCitys:[{"city":"合肥","id":"101220101"},
                        {"city":"上海","id":"101020100"},
                        {"city":"厦门","id":"101230201"},
                        {"city":"嘉兴","id":"101210101"},
                        {"city":"黄山","id":"101221008"},
                        {"city":"亳州","id":"101220901"},
                        {"city":"洛川","id":"101110309"},
                        {"city":"巴中","id":"101270901"},
                      ],
            cityID:'101220101',  
            day:'',
            low:'',
            high:'',  
            speed:'',
            fengxiang:'',
            type:''
    }
  },
  methods:{
      getSelected:function(){
        //alert(e.target.value);
        var cid = this.cityID;
         this.$http.jsonp('http://wthrcdn.etouch.cn/weather_mini?citykey='+cid).then(function(res){
                //console.log(JSON.parse(res.bodyText).data.forecast[0]);  
                var obj=JSON.parse(res.bodyText).data.forecast[0];
                var ndate=obj.date;
                var nlow=obj.low;
                var nhigh=obj.high;
                var nspeed=obj.fengli;
                nspeed=nspeed.substring(0,nspeed.length-3);
                var nnspeed=nspeed.slice(9);
                var nfengxiang=obj.fengxiang;
                var ntype=obj.type;

                this.day=ndate.slice(3);
                this.low=nlow.slice(2);
                this.high=nhigh.slice(2);
                this.speed=nnspeed;
           
                this.fengxiang=nfengxiang;
                this.type=ntype;

            
            },function(){
                console.log('请求失败处理');
        });
        
 
      }
  },
 mounted(){

        //  默认为合肥
         this.$http.jsonp('http://wthrcdn.etouch.cn/weather_mini?citykey=101220101').then(function(res){
                //console.log(JSON.parse(res.bodyText).data.forecast[0]);  
                var obj=JSON.parse(res.bodyText).data.forecast[0];
                var ndate=obj.date;
                var nlow=obj.low;
                var nhigh=obj.high;
                var nspeed=obj.fengli;
                nspeed=nspeed.substring(0,nspeed.length-3);
                var nnspeed=nspeed.slice(9);
                var nfengxiang=obj.fengxiang;
                var ntype=obj.type;

                this.day=ndate.slice(3);
                this.low=nlow.slice(2);
                this.high=nhigh.slice(2);
                this.speed=nnspeed;
           
                this.fengxiang=nfengxiang;
                this.type=ntype;

            
            },function(){
                console.log('请求失败处理');
        });

       
        




 }

  

}





 

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.weather{
  min-height:310px;
  
}

.card{
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 0 solid transparent; 
    border-radius: 0;
    
}

.tabletest{
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
    white-space: normal;
    line-height: normal;
    font-weight: normal;
    font-size: medium;
    font-style: normal;
    color: -internal-quirk-inherit;
    text-align: start;
    font-variant: normal;
    display: table;
}

.tabletest{
  font-size: 16px;
  color:#6c757d
}

</style>
